<template>
  <div class="content" style="{backgroundcolor: #eee;}">
    <div>
      <Head  :arry="historyArray" />
      <div v-show="showindexbottom">
        <div class="middle" >
          <!-- 本地存储有历史记录才显示 -->
          <div class="history" v-show="showHistory">
            <span class="text">历史记录</span>
            <div class="icon" @click="clearHistory">
              <van-icon name="delete-o" />
            </div>
          </div>
          <div class="clear">
            <div
              class="historyItem"
              v-for="(item, index) in historyArray"
              :key="index"
              @click="navigateToSearch(item)"
            >
              {{ item }}
            </div>
          </div>
        </div>
        <div class="hotsearch">
          <div class="top">
            <span>热门搜索</span>
          </div>
          <div class="clear">
            <div
              class="hotsearchItem"
              v-for="(item, index) in hotKey" :key="index" @click="navigateToSearch(item.keyword)">
              {{ item.keyword }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import Head from "./component/head.vue";
  import { ref } from "vue";
  import { storeToRefs } from "pinia";
  import { onMounted } from "vue";
  import { gethotKey } from "../../api/search";
  import { useSearchStore } from "../../store/searchHead";
  import { useRouter } from "vue-router";
  const router = useRouter();
  const searchStore = useSearchStore();
  const { historyArray, placeholder,inpval,showindexbottom,show} = storeToRefs<any>(searchStore);
  //控制历史记录的显示与隐藏
  const hotKey = ref<any[]>([]);
  const showHistory = ref<Boolean>(false);
  //挂载时执行的函数
  onMounted(async()=>{
    //获取热门关键字
    const { data } = await gethotKey();
    //获取本地存储的搜索历史
    const searchHistory = localStorage.getItem("keyword");
    // console.log(data);
    //inpute输入框的提示
    placeholder.value = data.defaultKeyword.keyword;
    hotKey.value = data.hotKeywordVOList;
    // console.log(placeholder.value);
    //如果存在搜索历史,存储到historyArray,并显示到历史记录
    if(searchHistory){
        historyArray.value = JSON.parse(searchHistory as string);
        showHistory.value = true;
        }
      });
    //点击垃圾桶,清楚历史记录
    const clearHistory = () => {
        localStorage.removeItem("keyword");
        historyArray.value = [];
        showHistory.value = false;
      };
    //点击历史记录和热门搜索,跳转到搜索页面
    const navigateToSearch = (keyword: string) => {
        show.value=false
        inpval.value=keyword
        showindexbottom.value=true
        // console.log(inpval.value);
        router.push("/searchzyt?keyword=" + keyword+"&_stat_search=userhand");
        //判断该关键词是否在历史记录中,如果不存在,添加到historyArray,如果存在,删除之后再添加
        if(!historyArray.value.includes(keyword)){
          //历史记录大于八条，删一条
          if (historyArray.value.length >= 10){
               historyArray.value.pop();
          }
          historyArray.value.unshift(keyword);
          localStorage.setItem("keyword", JSON.stringify(historyArray.value));
        }else{
          if (historyArray.value.length >= 10){
               historyArray.value.pop();
          }
          historyArray.value.splice(historyArray.value.indexOf(keyword),1)
          historyArray.value.unshift(keyword)
          localStorage.setItem('keyword', JSON.stringify(historyArray.value))
        }
      };
</script>
<style lang="scss" scoped>
  .content {
    background-color: #eee;
  }
  .middle {
    margin-bottom: 10px;
    background-color: white;
    // padding: 0 10px;
    .history {
      display: flex;
      justify-content: space-between;
      width: 345px;
      height: 45px;
      line-height: 45px;
      color: #8b8a8a;
      margin-left: 10px;
      .text {
        font-size: 14px;
      }
      .icon {
        font-size: 20px;
        line-height: 45px;
      }
    }
    .clear {
      width: 345px;
      display: flex;
      flex-wrap: wrap;
      padding: 10px 0 30px 10px;
      .historyItem {
        border-radius: 5px;
        padding: 5px;
        margin-right: 15px;
        font-size: 14px;
        border: 1px solid #8b8a8a;
        font-size: 12px;
        cursor: pointer;
        margin-bottom: 10px;
      }
    }
  }
  .hotsearch {
    box-sizing: border-box;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: white;
    padding: 10px 15px;
    .top {
      color: #8b8a8a;
      font-size: 16px;
      span{
        font-size: 14px;
      }
    }
    .clear {
      width: 345px;
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      padding: 15px 0;
      .hotsearchItem {
        border-radius: 5px;
        padding: 5px;
        margin-right: 15px;
        font-size: 14px;
        border: 1px solid #8b8a8a;
        font-size: 16px;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 12px;
        &:nth-child(2){
        border: 1px solid #dd1a21;
        }
      }
    }
  }
</style>
